import React, { FC } from "react";
import { Dayjs } from "dayjs";

import styles from "./index.module.less";

export interface QuestionaireCardProps {
	name: string;
	id: string;
	status: string;
	createdAt: Dayjs;
}

const QuestionaireCard: FC<QuestionaireCardProps> = (props: QuestionaireCardProps) => {
	const { name, id, status, createdAt } = props;
	return (
		<div className={styles.card}>
			<div className={styles["card-header"]}>
				<div style={{ display: "flex" }}>
					<div className={styles.row}>
						<div className="el-col el-col-20">{name}</div>
					</div>
					<span data-v-7105a846="" className="headspan">
						id：{id}
					</span>
					<span data-v-7105a846="" className="headspan">
						<i data-v-7105a846="" className="el-icon-error"></i>
						{status}
					</span>
					<span data-v-7105a846="" className="headspan">
						答卷： <span data-v-7105a846="">0</span>
					</span>
					<span data-v-7105a846="" className="headspan">
						创建时间：{createdAt.format("YYYY-MM-DD")}
					</span>
				</div>
			</div>
			<div className="el-card__body">
				<div data-v-7105a846="" className="card-body">
					<span className="el-link--inner">&nbsp;编辑</span>
					<span className="el-link--inner">&nbsp;预览</span>
					<span className="el-link--inner">&nbsp;分享</span>
					<span className="el-link--inner">&nbsp;统计</span>
					<span className="el-link--inner">&nbsp;清空</span>
					<div className="el-button-group">
						<button type="button" className="el-button el-button--default el-button--mini">
							<span> 导出 </span>
						</button>
						<button type="button" className="el-button el-button--default el-button--mini el-dropdown__caret-button" aria-controls="dropdown-menu-1648" tabIndex={0}>
							<span>
								<i className="el-dropdown__icon el-icon-arrow-down"></i>
							</span>
						</button>
					</div>
					<ul data-v-7105a846="" className="el-dropdown-menu el-popper el-dropdown-menu--mini" id="dropdown-menu-1648" style={{ display: "none" }}>
						<li data-v-7105a846="" tabIndex={-1} className="el-dropdown-menu__item">
							导出Word
						</li>
						<li data-v-7105a846="" tabIndex={-1} className="el-dropdown-menu__item">
							导出PDF
						</li>
					</ul>
				</div>
				<button data-v-7105a846="" type="button" className="el-button rightside el-icon-delete el-button--text">
					<span> 删除</span>
				</button>
				<button data-v-7105a846="" type="button" className="el-button rightside el-icon-star-off el-button--text">
					<span> 收藏</span>
				</button>
				<button data-v-7105a846="" type="button" className="el-button rightside el-icon-document el-button--text">
					<span> 复制</span>
				</button>
				<button data-v-7105a846="" type="button" className="el-button rightside el-icon-video-play el-button--text" style={{ color: "rgb(3, 130, 53)" }}>
					<span> 发布</span>
				</button>
			</div>
		</div>
	);
};

export default QuestionaireCard;
